
		
 //add the user position marker  

 function	addPositionMarker() {
 	markerYourPos = new google.maps.Marker({
 		 map: mapPanel.map,
 		 position: latLngPos,
 		 draggable: true, 
 		 icon:'res/images/icons/hereIcon.png',
 		 shadow: 'res/images/icons/shIcon.png'
 	    });
 	  
 	  
 	 google.maps.event.addListener(markerYourPos, "click",function(){
 		 
 	 	 markBubble.setContent("your position ");
 	     markBubble.open( mapPanel.map,markerYourPos);
 	     
 	   });
  };
  //get the stations, by population the store<calling the proxy
function GetBusStations( position){ 
	var busStations  = Ext.StoreMgr.lookup('BusStations');
	busStations.getProxy().url = 'app/data/getStations.php?latitude='+position.lat()+'&longitude='+position.lng();
	busStations.load();
}
//add all the stations to the map
function addAllStations(stations){
	for(var i=0; i<stations.length; i++){
		  addStation(stations[i].data);
	  }
}


//clear stations

function clearBusStations(){
	 for (var i= markers.length; i >0 ; i--) {
		 markers.pop().setMap(null); // remove markers from map 
		};
		 markers = [];  
	 
};
//add the station markers
function	addStation( station){ 
		//set marker on mapbearing2009
 		var latLng = new google.maps.LatLng(station.latitude,station.longitude);
 			
          marker  = new google.maps.Marker({
      		 map: mapPanel.map,
      		 position: latLng, 
      		draggable: true, 
      		icon:'res/images/icons/busStopIcon.png',
			 shadow: 'res/images/icons/shIcon.png'
      	    });
         markers.push(marker);
		 stationsIds.push(station.id);
		  
		 google.maps.event.addListener(marker, "click",function(){
			  var content= "<div>"+station.name+"</br>"+station.direction+"</div>";
			  //marker.setDraggable(false);
			  stationId= marker.getTitle();
			  var nextBtn = obj.application.viewport.query('#nextBtn')[0];
			  nextBtn.show();
			  stationId = stationsIds[markers.indexOf(marker)];
			  markBubble.setContent(content);
		      markBubble.open(mapPanel.map,marker);
		      selectedMarkerBubble =  markBubble;
		  });
		 
		 google.maps.event.addListener(markBubble, "closeclick",function(){
			   
			  var nextBtn = obj.application.viewport.query('#nextBtn')[0];
			  nextBtn.hide();
			  
		     
		  });
	};
 
// get the buss list
	
function GetBusses( ){
		var busses  = Ext.StoreMgr.lookup('Busses');
		busses.getProxy().url = 'app/data/getBusses.php?id_station='+stationId;
		busses.load();
	
	}
	 
	//THE  MAP  CONTROLLER 
Ext.regController('Map', {
	
	 
      
	    
	 position: function(){
		 obj = this;
		 
		 //1. set title 
    	 setTitle(this,"Set Position"); 
    	 
    	 
		 //2. set the button visibility and links
				 	//next btn - go to show -busses action(keep all)
					//back btn - go to position action
    	//show back button
     	var backBtn = this.application.viewport.query('#backBtn')[0];
   	    backBtn.show(); 
 		//add fct to back button to go back to the welcome page
 		backBtn.setHandler(
 		 function(){
 			 		backBtn.show();
 				    Ext.dispatch({
 				        controller: 'Home',
 				        action: 'index',
 				        historyUrl: 'Home/index',
 				        animation: {
 				            type: 'slide',
 				            reverse: true,
 				        },
 				    });
 				});
   	  
   	  
 		
 		
 		//gets the next button, set its to visible
   	   var nextBtn = this.application.viewport.query('#nextBtn')[0];
 		nextBtn.show(); 
 		//adds fct to next button to go to the station action from the same controller
 		nextBtn.setHandler(
 		 function() {
 			     GetBusStations(markerYourPos.position);
 			     markerYourPos.setDraggable(false); 
 			    Ext.dispatch({
			        controller: 'Map',
			        action: 'stationsNew',
			        historyUrl: 'Map/stationsNew', 
			        //
			        animation: {
			            type: 'slide', 
			        },
			    });
 				}); 
 		
 		
 		
 		
 		
 		
    	 
    	 
	  if(!mapPanel){
		//if mapPanel does not exist 
		  
		 //3. verify the bounds of the location 
			 initLocationBounds();
		 //4. create the mapPanel (if it does not exist) 
			 mapPanel =  new Ext.Map({
				 title: "uhu",  
				   useCurrentLocation: false,
					mapOptions: {
						zoom: 14,
						center: latLngPos
					} 			 
			 });
		 
		 //5. set the view to active  //if not active already(if mapPane does not exist)
			 
	       if ( ! this.positionView)
	    	    {
	    	        this.positionView = this.render({
	    	            xtype: 'MapPosition',
	    	        });
	    	    }
	       this.application.viewport.setActiveItem(this.positionView );
		 //6. add the markerYourPos to the map
	       addPositionMarker();
}
	 },
	  
	 
     stationsNew: function(){
    	 obj = this;
		 
		 //1. set title
    	 setTitle(this,"Pick a Station");
		 // empty all selected 
    	 emptySelectedBusses();
    	 
    	 //2. set the button visibility and links 
				//next btn - go to show -busses action(keep all)
				//back btn - go to position action
							// clear all station markers
    	 //toolbar button - back 
    	 //goes to map position(should clear all from map)
		    var backBtn = this.application.viewport.query('#backBtn')[0];
		  	backBtn.show();
		    backBtn.setHandler(function()
				{
		    	backBtn.show();
    			clearBusStations();
    			markerYourPos.setDraggable(true); 
  		  		Ext.dispatch({
  		  					controller: 'Map',
  		  					 action: 'position',
  		  					 historyUrl: 'Map/position', 
  		  					 animation: {
				            type: 'slide',
				            reverse: true,
				         },
				    });
				});
		  	//toolbar button - next
		    	// goes to  the busses controller ,action show
		   	var nextBtn = this.application.viewport.query('#nextBtn')[0];
		 	nextBtn.hide();
		   	  
		 	nextBtn.setHandler(function()
				{
		 		GetBusses( ); 
		 		selectedMarkerBubble.close();
				}); 
 		
	 
  
		  
		 
		 
		  
		 
	 },
	 stationsOld: function(){
		 obj = this;
		//1. set title
		 setTitle(this,"Pick a Station");
		 
		 emptySelectedBusses();
		 
		 //2. set the button visibility and links 
				//next btn - go to show -busses action(keep all)
				//back btn - go to position action
							// clear all station markers
		 //toolbar button - back 
		 //goes to map position(should clear all from map)
		    var backBtn = this.application.viewport.query('#backBtn')[0];
		  	backBtn.show();
		    backBtn.setHandler(function()
				{
		    	backBtn.show();
				clearBusStations();
				markerYourPos.setDraggable(true); 
			  		Ext.dispatch({
			  					controller: 'Map',
			  					 action: 'position',
			  					 historyUrl: 'Map/position', 
			  					 animation: {
				            type: 'slide',
				            reverse: true,
				         },
				    });
				});
		  	//toolbar button - next
		    	// goes to  the busses controller ,action show
		   	var nextBtn = this.application.viewport.query('#nextBtn')[0];
		 	nextBtn.hide();
		   	  
		 	nextBtn.setHandler(function()
				{
		 		GetBusses( );
				    Ext.dispatch({
				        controller: 'Busses',
				        action: 'show',
				        historyUrl: 'Busses/show', 
				        //
				        animation: {
				            type: 'slide', 
				        },
				    });
				}); 
		//4. set the view to active  //if not active already 
		 	 this.application.viewport.setActiveItem(this.positionView );  
			 
			 
		  
		 
	 },
	 
	   
});